<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量生成Robots</title>
    <link href="/static/css/bootstrap3.4.1.min.css" rel="stylesheet">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/FileSaver.min.js"></script>
    <link rel="shortcut icon" href="/static/robots.ico"/>
</head>
<body>
<div class="container text-center" id="app">
    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="alert">
        <strong>友情提示！</strong> 提交内容不能为空
    </div>

    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="error_msg!=''">
        <strong>提交失败！</strong> {{ error_msg }}
    </div>

    <!--提交成功的提示-->
    <div class="alert alert-success" role="alert" v-if="show">
        <strong>提交成功！</strong> 你可以查看下面的表格，有每个域名的最终结果
    </div>

    <div id="result" v-if="show">
        <h2>执行结果</h2>
        <div class="row">
            <div class="col-md-8">
                <h3>
                    <span class="label label-success">成功{{stat.success}}个</span>
                    <span class="label label-danger" @click.prevent="copyErrorDomains()" style="cursor:pointer">失败{{stat.error}}个</span>
                </h3>
            </div>
            <div class="col-md-4">
                <button type="button" class="btn btn-primary" @click.prevent="exportExcel()">
                    <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbsp;&nbsp;导出到Excel
                </button>
            </div>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col" class="text-center">域名</th>
                <th scope="col" class="text-center">结果</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in items">
                <th scope="row" v-bind:class="item.code=='1' ? 'text-success' : 'text-danger'">{{ index+1 }}</th>
                <td v-bind:class="item.code=='1' ? 'text-success' : 'text-danger'">{{ item.domain }}</td>
                <td v-bind:class="item.code=='1' ? 'text-success' : 'text-danger'">{{ item.res }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <h3 class="text-center text-warning">{{ topic }}</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <input type="text" style="display:none!important" value="<?php echo $url;?>" ref='requrl'>
            <input type="text" style="display:none!important" value="<?php echo $exporturl; ?>" ref='exporturl'>
            <textarea class="form-control" rows="20" name="domains" v-model="domains"
                      placeholder="域名列可以直接粘贴过来，每个域名只要能换行即可">{{ domains }}</textarea>
        </div>
        <div class="form-group row">
            <div class="col-lg-6">
                <button type="button" class="btn btn-default btn-lg" @click.prevent="reset()">重置</button>
            </div>
            <div class="col-lg-6">
                <button type="button" class="btn btn-primary btn-lg" @click.prevent="commit()" v-bind:disabled="btn_disabled?false:true">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            topic: '批量生成Robots',
            domains: '',
            show: false,
            btn_disabled: true,
            alert: false,
            items: [],
            stat: {},
            error_domains: '',
            error_msg: '',
            datamd5: '',
        },
        methods: {
            exportExcel() {
                let url = this.$refs.exporturl.value
                if (this.datamd5 == '') {
                    alert('数据已过期，请重新提交并导出');
                    return false;
                }
                axios.create({
                    timeout: 20000,
                    responseType: 'blob'
                }).post(url, {datamd5: this.datamd5}).then((response) => {
                    if (response.headers['content-type']=='application/json; charset=utf-8') {
                        alert('数据已过期，请重新提交并导出');
                        return false
                    }
                    const contentDisposition = response.headers['content-disposition'];
                    const filename = contentDisposition.split(';')[1].split('filename=')[1].trim();
                    saveAs(new Blob([response.data]), filename);
                }).catch(error => {
                    console.error('Error downloading file:', error);
                });
            },
            copyErrorDomains() {
                if (this.error_domains == '') {
                    alert('没有失败的域名');
                    return false;
                }
                var oInput = document.createElement("textarea");
                oInput.value = this.error_domains;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = "oInput";
                oInput.style.display = "none";
                alert("复制成功");
            },
            reset() {
                this.domains = '';
                this.show = false;
                this.btn_disabled = true;
                this.alert = false;
            },
            commit() {
                // 请求url
                let url = this.$refs.requrl.value;
                this.btn_disabled = false;
                this.alert = false;
                if (this.domains != '') {
                    this.show = false;
                    this.error_msg = '';
                    axios.post(url, {domains: this.domains}).then((response) => {
                        this.show = true;
                        if (response.data.code == 200) {
                            this.items = response.data.result.items;
                            this.stat = response.data.result.stat;
                            this.datamd5 = response.data.result.datamd5;
                            this.error_domains = response.data.result.errdomains;
                            this.error_msg = '';
                            this.domains = '';
                        } else {
                            this.error_msg = '接口请求异常，请联系开发人员排查';
                        }
                        this.btn_disabled = true;
                    });
                } else {
                    this.alert = true;
                    this.btn_disabled = true;
                }
            }
        }
    });
</script>